forum

home / developersection / forums / create a website which include drop-down and other basic html code.

Ask Question

Create a website which include drop-down and other basic HTML code.

Abhishek Srivasatava 2268 14-Oct-2016

Make the website containing 4 link on the top (Home) (About us) (carrier) (Interview question) (vertically).

All four link have drop down option.

Including log-in form & Image 


css-css3 html  css 
Updated on 14-Oct-2016
Abhishek Srivasatava

Employee

Message
Can you answer this question?
Answer

1 Answers

Abhishek Srivasatava

Abhishek Srivasatava

14-Oct-2016

Here is the complete code for this question:

<!doctype html>
<html>
<head>
<style>
 
.NewLine {
    position:
relative;
    left: 200px;
    color:red
 
}
 
input[type=button], input[type=submit] {
    width: 50%;
    padding: 12px
20px;
    margin: 4px
0;
    box-sizing:
border-box;
    border: none;
   
background-color: Orange;
    color: white;
}
 
input[type=text] {
    width: 50%;
    padding: 12px
20px;
    margin: 4px
0;
    box-sizing:
border-box;
    border: none;
   
background-color: Red;
    color: white;
}
 
.bottomleft {
    position:
absolute;
    bottom: 8px;
    left: 16px;
}
 
 
.bottomright {
    position:
absolute;
    bottom: 1px;
    right: 1px;
}
 
ul {
   
list-style-type: none;
    margin: 0;
    padding: 0;
    overflow:
hidden;
   
background-color: #333;
}
 
li {
    float: left;
}
 
li a, .dropbtn {
    display:
inline-block;
    color: white;
    text-align:
center;
    padding: 14px
16px;
   
text-decoration: none;
}
 
li a:hover, .dropdown:hover .dropbtn {
   
background-color: red;
}
 
li.dropdown {
    display:
inline-block;
}
 
.dropdown-content {
    display:
none;
    position:
absolute;
   
background-color: #f9f9f9;
    min-width:
160px;
    box-shadow:
0px 8px 16px 0px rgba(0,0,0,0.2);
}
 
.dropdown-content a {
    color: black;
    padding: 12px
16px;
   
text-decoration: none;
    display:
block;
    text-align:
left;
}
 
.dropdown-content a:hover {background-color: #f1f1f1}
 
.dropdown:hover .dropdown-content {
    display:
block;
}
</style>
</head>
<body>
<abbr title="MindStick">
<ul >
 
          
<li class="dropdown">
    <a
href="https://www.mindstick.com"
class="dropbtn">Home</a>
    <div
class="dropdown-content">
      <a
href="https://www.mindstick.com">Main Page</a>
      <a
href="https://www.mindstick.com/Services">Software page</a>
      <a
href="https://www.mindstick.com/Products">Product Page</a>
    </div>
 
<li class="dropdown">
    <a
href="https://www.mindstick.com/Home/AboutUs"
class="dropbtn">About us</a>
    <div class="dropdown-content">
      <a
href="https://www.mindstick.com/ContactUs">USA</a>
      <a
href="https://www.mindstick.com/ContactUs">India</a>
      <a
href="https://www.mindstick.com/ContactUs">Autralia</a>
    </div>
 
<li class="dropdown">
    <a
href="https://www.mindstick.com/DeveloperSection/Interview"
class="dropbtn">Interview Question</a>
    <div
class="dropdown-content">
      <a
href="https://www.mindstick.com/DeveloperSection/interview?authorId=51998">Abhishek's  Interview Question</a>
      <a
href="https://www.mindstick.com/DeveloperSection/interview?authorId=186">Monoj's
Interview Question</a>
      <a
href="https://www.mindstick.com/DeveloperSection/interview?authorId=1245  ">Barbara's Interview
Question</a>
    </div>
 
<li class="dropdown">
    <a
href="https://www.mindstick.com/Career"
class="dropbtn">Carrier</a>
    <div
class="dropdown-content">
      <a
href="https://www.mindstick.com/Career#careerform">Software
Engineer</a>
      <a
href="https://www.mindstick.com/Career#careerform"> Senior
Business Analyst</a>
      <a
href="https://www.mindstick.com/Career#careerform">PHP
Developer</a>
    </div>
</li>
</ul>
 
 
<img src=
"C:\Users\Uttam\Desktop\Photoshop\Newslatter\1_01.jpg" alt =
"Loading" style="width:1500px;height:500px;">
 
<div class= "NewLine">
<a class="NewLine" href=
"https://www.mindstick.com/"> <h1> Welcome to the MindStick
gift Website!!!</h1></a>
<h1><marquee behavior="scroll"
direction="left" > Please Login !!! Don't be shy...
</marquee></h1>
</div>
 
 
<div class=bottomright>
<img  src=
"C:\Users\Uttam\Desktop\Photoshop\Newslatter\1_02.jpg" alt =
"Loading" style="width:500px;height:160px;">
</div>
 
<div class=bottomleft>
<h3>Please Login for the Christmas
Gift</h3>
<form
action="https://www.mindstick.com">
  <label for="fname"><b>UserName</b></label><br>
  <input
type="text" id="fname" name="fname" value="
"><br>
  <label
for="lname"><b>Password</b></label><br>
  <input
type="text" id="lname" name="lname" value="
"> <br>
<b><input type="Submit"
value="Log-in"></b>
</form>
</div>
</abbr>
</body>
 
</html>

Create a website which include drop-down and other basic HTML code.

MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy